<template>
	<view>
		<uni-nav-bar left-icon="back" @click-left="back" @click-right="save()" right-text="保存" title="个人信息修改"></uni-nav-bar>
		<view class="list">
			<view class="list-item">
				<text>{{ type_name[type] }}</text>
				<view class="input">
					<input
						v-if="type != 'sex'"
						class="inputText"
						type="text"
						data-name="value"
						@input="input"
						:value="value"
						:placeholder="'请输入您的' + type_name[type]"
						placeholder-class="placeholder"
					/>
					<radio-group v-else @change="radioChange">
						<radio class="radio" value="1" :checked="value == 1">男</radio>
						<radio class="radio" value="2" :checked="value == 2">女</radio>
					</radio-group>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default {
	components: { uniNavBar, uniIcons },
	data() {
		return {
			value: '',
			type: 'sex',
			type_name: {
				nickname: '用户昵称',
				age: '年龄',
				sign_text: '个性签名',
				email: '邮箱',
				sex: '性别'
			}
		};
	},
	onLoad(option) {
		this.type = option.type || 'sex';
		if (this.type == 'sex') {
			this.value = 1;
		}
		this.getData();
	},
	methods: {
		async getData() {
			let res = await this.$request.get('/setting/editMemberInfo', {});
			let data = res.data.data.list;
			if (data) {
				let { nickname, age, sign_text, email, sex} = data;
				for (let key in data) {
					if(key == this.type){
						this.value = data[key];
					}
				}
			}
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		input(e) {
			let name = e.target.dataset.name;
			let value = e.detail.value;
			this[name] = value;
		},
		radioChange(e) {
			this.value = e.detail.value;
		},
		async save() {
			if (!this.value) {
				uni.showToast({
					title: '请输入' + this.type_name[this.type],
					duration: 2000
				});
				return false;
			}
			let data = {};
			data[this.type] = this.value;
			let res = await this.$request.post('/setting/editMemberInfo', {
				data
			});
			if (res.data.code == 10000) {
				uni.showToast({
					title: '保存成功',
					duration: 2000
				});
				setTimeout(()=> {
					uni.navigateBack({
						delta:1
					})
				}, 2000);
			} else {
				uni.showToast({
					title: '保存失败',
					duration: 2000
				});
			}
		}
	}
};
</script>

<style lang="scss">
.list {
	width: 100%;
	box-sizing: border-box;
	padding-left: 30upx;
	.list-item {
		width: 100%;
		height: 110upx;
		border-bottom: 2upx solid #e7e7e7;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding-right: 20upx;
		font-size: $uni-font-size-base;
		color: #333333;
		.input {
			width: 500upx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			.inputText {
				color: #333333;
				font-size: $uni-font-size-base;
				width: 100%;
				text-align: right;
				box-sizing: border-box;
			}
			.radio {
				margin-left: 30upx;
			}
		}
	}
}
.placeholder {
	color: #d7d7d7;
}
</style>
